<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link href="{{env('CDN_RESOURCE')}}/css/levelIntro/pc.css" rel="stylesheet" type="text/css">
  <script src="{{env('CDN_RESOURCE')}}/js/jquery-2.1.4.min.js"></script>
  <link rel="shortcut icon" type="image/x-icon" href="../icon/icon_web.png"/>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>课程介绍</title>
</head>
<body>
<div class="wrap" id="wrap">
  <div class="page-content">
    <div class="p-left">
      <div class="preview section">
        <div class="menu-icon icon"></div>
        <div class="header"> 内容导览 Preview</div>
        <div class="age content">

          <div class="title">
            <div class="age-icon"></div>
            适用年龄:
          </div>
          <span class="num"></span>
        </div>

        <div class="material content">

          <div class="title">
            <div class="material-icon"></div>
            <span id="material">对应等级</span>
          </div>
          <ul class="material-list">
          </ul>
        </div>

        <div class="brief content">

        </div>

      </div>

      <img class="intro-img" src="">

      <div class="objects section">
        <div class="goal-icon icon"></div>
        <div class="header">学习目标 Learning Objects</div>

        <div class="object-item">
          <div class="title">主题</div>
          <ul class="content scenario-list">
          </ul>
        </div>

        <div class="object-item">
          <div class="title" id="vocab-senten">词汇/典型例句</div>
          <div class="content vocab-senten">

          </div>
        </div>

        {{--<div class="object-item">--}}
        {{--<div class="title">新增语法点</div>--}}
        {{--<div class="content">--}}
        {{--<p class="item">{{$level['objects']['newGrammar']}}</p>--}}
        {{--</div>--}}
        {{--</div>--}}
      </div>

    </div>
    <div class="p-right">

      <div class="section unit-detail">
        <div class="flag-icon icon"></div>
        <div class="header">单元介绍 Introduction by Unit</div>


        <div class="unit-list"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">


  $(document).ready(function () {

    $('#wrap').height(window.innerHeight - 100)

    $(window).resize(function () {
      $('#wrap').height(window.innerHeight - 100)
    })
  })

  var requestUrlArray = window.location.href.split('/')
  var requestCourseId = requestUrlArray[requestUrlArray.length - 1]

  //level 基本信息
  $.getJSON('/levelIntroductionJson/courseIntroduction.json', function (data) {
    var courseInfo = data['course' + requestCourseId]
    $('.num').text(courseInfo.preview.age)
    courseInfo.preview.material.forEach(function (data) {
      if (data !== '') {
        $('.material-list').append('<li class="item"> <span></span>' + data + '</li>')
      } else {
        $('.material-list').append('<li class="item" style="display:none"> <span></span>' + data + '</li>')
      }
    })

    courseInfo.preview.brief.forEach(function (data) {
      $('.brief').append('<p class="item">' + data + '</p>')

    })

    $('.intro-img').attr('src', courseInfo.image)

    courseInfo.objects.scenario.forEach(function (data) {
      $('.scenario-list').append('<li class="item">' + data + '</li>')
    })

    courseInfo.objects.vs.forEach(function (data) {
      $('.vocab-senten').append('<span class="item">' + data + '</span>')
    })

  })

  //level unit 课程信息
  $.getJSON('/levelIntroductionJson/course' + requestCourseId + '.json', function (data) {
    var courseDetail = data
    courseDetail.chapters.forEach(function (data, key) {
      var html = ''

      if (key === 0) {
        html += '<div class="unit active-unit">'
        $('.unit-list').append('<span class="select">Unit ' + (key + 1) + '</span>')
      } else {
        html += '<div class="unit">'
        $('.unit-list').append('<span>Unit ' + (key + 1) + '</span>')
      }

      html += '<div class="object">' +
        '<span class="title">' + ($.trim(data.name) !== '' ? data.name + ': ' : '') + '</span>' +
        '<span class="item">' + data.description + '</span>' +
        '</div>' +

        '<table class="unit-content">' +
        '<tr>' +
        '<th class="short"></th>' +
        '<th class="long">目标</th>' +
        '<th class="long">词汇</th>' +
        '<th class="long">' + (courseDetail.seriesId === 3 ? '高频词句' : '句型') + '</th>' +
        '</tr>'

      data.lessons.forEach(function (unitDetail) {
        var sentence = unitDetail.sentence === '' || unitDetail.sentence === null ? '' : unitDetail.sentence.replace(/\n/g, '<br>')
        html += '<tr>' +

          '<td class="short">Lesson ' + (unitDetail.name || '') + '</td>' +
          '<td class="long">' +
          '<span class="item">' + (unitDetail.descriptionCN || '') + '</span>' +
          '</td>' +
          '<td class="long">' +
          '<span class="item">' + (unitDetail.vocabulary || '') + '</span>' +
          '</td>' +
          '<td class="long">' +
          '<span class="item">' + (sentence || '') + '</span>' +
          '</td>' +
          '</tr>'
      })

      html += '</table></div>'

      $('.unit-detail').append(html)
    })

    $('.unit-list').append('<div class="u-nav-cursor" id="unavCursor"></div>')
    $('.unit-list span').click(function () {
      var nav = $(this)
      var navIndex = $(this).index()
      nav.fadeOut(125).addClass('select').fadeIn(125).siblings('span').removeClass('select')
      $('#unavCursor').animate({
        left: nav.position().left
      }, 250)
      $('.unit').eq(navIndex).addClass('active-unit').siblings('.unit').removeClass('active-unit')
    })

    if (courseDetail.seriesId === 3) {
      $('#material').text('小故事')
      $('#vocab-senten').text('词汇/高频词句')
    }

  })

</script>

